<template>
<div class="container">

<!--新闻列表-->
  <div  class="bg" >
    <ul>
      <li class="newList" v-for="(item,index) in search()" :key="index" ref="listBB" >
        <router-link tag="div" :to="{
         path:'/NewDetails',
         query:{articleId:item.articleId}
        }" class="newListTop">
          <div class="newTitle" >{{item.title}}</div>
          <div class="newListImg"><img  v-lazy="item.bannerImgUrl" /></div>
        </router-link>
        <div class="newListBottom">
          <p clsaa="from">
            <span>来源:</span>
            {{item.articleSource}}
            {{item.sendTime}}
          </p>
            <van-popover
                :value="show === index"
                :actions="actions"
                placement="top-end"
                @select="onSelect(index)"
                @click="changeRrt(index)"
                :close-on-click-action='true'
                ref="listAA"
            >
              <template #reference>
                <van-icon name="cross" @click="changeShowPopover(index)" color="#888"/>
              </template>
            </van-popover>
        </div>
      </li>
    </ul>
  </div>

</div>
</template>

<script>
import {getNewList} from "@/api/index-api";
import { Toast } from 'vant';
export default {
name: "NewList",
  data(){
     return{
       isShow:null,
       newList:[],
       newData:'',
       //叉号
       show:null, // 当前点击索引
       //气泡弹出框
       showPopover:true,
       actions: [
         { text: '不感兴趣', icon: 'close' },
         { text: '举报', icon: 'warning-o' },
         { text: '有问题', icon: 'question-o' },
         { text: '其他', icon: 'more-o' },
       ],

     }
  },
  props:{
     news:Number,
     sar:String,
     update:Boolean,
  },
  methods:{
    search(){
      console.log(this.sar)
      return this.newList.filter(item=>item.title.includes(this.sar))
    },
    changeShowPopover(data){
      console.log(data)
      this.show = data
      // this.isShow = data
    },
    onSelect(action) {
      // console.log(action)
      Toast("删除成功");
      this.isShow=false
      this.$refs.listBB[action].style.display="none"
      // this.$refs.listAA.style.display="none"
    },


  },
  created(){
    console.log(this.sar)
    getNewList(1,50,this.news).then(({code,rows})=>{
      // console.log(code);
      console.log(rows);
      if(code === 0){
        this.newList = rows;
        console.log(this.newList)

      }
    })

  },
  watch:{

  }
}
</script>

<style scoped lang="less">
.container{
  padding-bottom:60px;
}
.bg{
  background-color:#eee;

}
ul{
  //width:95%;
  list-style:none;
  display:flex;
  flex-direction: column;
  justify-content: center;
  margin:auto;
  //border:1px solid red;
  padding-left:7px;
  padding-right:7px;
}
.newList{
  display:flex;
  flex-direction: column;
  justify-content: center;
  margin:auto;
  margin:0 0 7px 0;
  background-color:white;
}
.newListTop{
  display:flex;
  padding-left:5px;
  padding-right:5px;

}
.newListBottom{
  display:flex;
  justify-content:space-between;
  align-items: center;
  padding:0 5px 0 5px;

}
p{
  font-size:10px;
  margin:0;
  color:#888;
}
.delete{
  width:12px;
  height:12px;
}
.newTitle{
  width:70%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  align-items: center;
  margin-top:15px;
  //margin:auto;
  font-size:18px;
}
.newListImg{
  width:25%;
  //display:flex;
  //margin:auto;
  margin-top:5px;
}
.newListImg>img{
  width:100px;
  height:100px;
  display:flex;
  margin:auto;
}

</style>